<template>
  <div class="message" :class="classObj">
    {{ message }}
  </div>
</template>

<script>
export default {
  props: {
    message: String,
    type: {
      type: String,
      default: 'info'
    }
  },
  setup(props) {
    // const { type } = props // 接受父组件传递到的值 不能解构否则会没有响应式
    const classObj = {
      'message-success': props.type === 'success',
      'message-info': props.type === 'info',
      'message-warning': props.type === 'warning',
      'message-danger': props.type === 'danger'
    }

    return { classObj }
  }
}
</script>

<style scoped>
.message {
  position: fixed;
  top: 50%;
  left: 50%;
  max-width: 300px;
  transform: translate(-50%, -50%);
  padding: 6px 10px;
  background: #424242;
  text-align: center;
  line-height: 24px;
  border-radius: 4px;
}

.message-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.message-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.message-warning {
  color: #8a6d3b;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.message-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
</style>
